import VueRouter from "vue-router";
import Vue from "vue";

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFonud/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail");
const NewsDetail = () => import("@/pages/Home/News/NewsDetail");

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/Home",
    },
    {
      path: "/Home",
      component: Home,
      // name: "Home",
      //二级路由配置
      children: [
        {
          /* 
          二级路由的路径可以直接书写二级路由的路由名称即可,不用书写完整的地址
          但是不能写 /+当前路由地址!!!!!!!!!!!!
          */
          path: "News",
          component: News,
          name: "News",
          // 三级路由
          children: [
            {
              path: "NewsDetail",
              component: NewsDetail,
              name: "NewsDetail",


              // props传参
              props: (route) => {
                //如果props是一个函数,则可以在内部接受到当前路由组件的$route对象
                console.log(route, "route");
                return {
                  ...route.params,
                  ...route.query,
                  classRoom: "0516",
                  count: "71",
                };
              },



            },
          ],
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
          children: [
            {
              path: "MusicDetail/:id/:age?",
              component: MusicDetail,
              name: "MusicDetail",
            },
          ],
        },
        {
          path: "Game",
          component: Game,
          name: "Game",
        },
        {
          path: "",
          redirect: "News",
        },
      ],
    },
    {
      path: "/Login",
      component: Login,
      name: "Login",
    },

    //404配置卸载最下边
    {
      path: "/*",
      component: NotFound,
    },
  ],
});

//4.暴露router，注入到vue实例中
export default router;
